<template>
  <div class="container">
    <div class="header-content">
      <h3>{{ university.schoolName }}档案录入权限审批</h3>
    </div>
    <div class="my-content">
      <div class="my-content-item" v-if="applicationPage">
        <template>
          <el-table
            height="400px"
            :data="applicationPage.records"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              fixed=""
              prop="userName"
              label="申请人"
              width="120"
            >
            </el-table-column>
            <el-table-column label="申请人类型" prop="type" width="100">
            </el-table-column>
            <el-table-column label="档案类型" prop="fileType" width="120">
            </el-table-column>
            <el-table-column
              prop="status"
              label="处理情况"
              width="120"
            ></el-table-column>
            <el-table-column label="申请时间" prop="createTime" width="180">
            </el-table-column>
            <el-table-column label="证明材料" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleOnLine(scope.$index, scope.row)"
                  ><li class="el-icon-view"></li>
                  在线预览</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleDownload(scope.$index, scope.row)"
                  ><li class="el-icon-download"></li>
                  下载</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handlePass(scope.$index, scope.row)"
                  ><li class="el-icon-circle-check"></li>
                  通过</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleNotPass(scope.$index, scope.row)"
                  ><li class="el-icon-circle-close"></li>
                  不通过</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="pagination-content">
          <template>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pageParams.pageNo"
              :page-sizes="[5, 10, 15, 20, 25]"
              :page-size.sync="pageParams.pageSize"
              :pager-count="5"
              layout=" total,sizes, prev, pager,next,jumper"
              :total="applicationPage.total"
            >
            </el-pagination>
          </template>
        </div>
      </div>
      <div class="my-content-item" v-else>
        <el-empty description="没有任何档案录入权限待审批"></el-empty>
      </div>
    </div>
    <div class="dialog">
      <el-dialog
        title="备注回复给申请者"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入需要备注的内容（通过或不通过的理由）"
          v-model="remark"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="escApplication">取 消</el-button>
          <el-button type="primary" @click="handleApplication">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getPageFileWritePersissionApplication,
  getUniversityById,
  handleFileWritePermissionApply,
} from "@/api";
import { BASE_PROVE_FILE_DOWNLOAD_PATH } from "@/utils/constants";
export default {
  data() {
    return {
      applicationPage: {
        records: [],
        total: 0,
        current: 1,
      }, //档案录入权限申请处理情况
      pageParams: {
        pageNo: 1, //当前页
        pageSize: 5, //当前页大小
      },
      university: "", //当前大学
      dialogVisible: false, //是否显示dialog对话框
      remark: "", //管理员审核备注内容
      fileWriteApplication: {
        id: "",
        userId: "",
        fileTypeId: "",
        status: "", //处理情况（0：已处理；1：未处理）
        result: "", //处理结果（0：通过；1：不通过）
        remark: "", //备注
      }, //处理审核发送请求携带的参数
      passOrNot: true, //是否通过审核
    };
  },
  created() {
    this.getUniversity();
    this.getFileWritePermissionApllication();
  },
  methods: {
    //查询当前大学所有未处理的档案录入权限申请
    async getFileWritePermissionApllication() {
      let res = await getPageFileWritePersissionApplication(
        this.$store.state.user.userInfo.universityId,
        this.pageParams.pageNo,
        this.pageParams.pageSize
      );
      if (res.code == 0) {
        this.applicationPage.records = res.data.records;
        this.applicationPage.total = res.data.total;
        this.applicationPage.current = res.data.current;
      } else {
        this.applicationPage = null;
      }
    },
    handleSizeChange(val) {
      this.getFileWritePermissionApllication();
    },
    handleCurrentChange(val) {
      this.getFileWritePermissionApllication();
    },
    //根据学校id，获取大学
    async getUniversity() {
      let res = await getUniversityById(
        this.$store.state.user.userInfo.universityId
      );
      if (res.code == 0) {
        this.university = res.data;
      }
    },
    async handlePass(index, row) {
      this.fileWriteApplication = row;
      this.passOrNot = true;
      this.dialogVisible = true;
    },
    async handleNotPass(index, row) {
      this.fileWriteApplication = row;
      this.passOrNot = false;
      this.dialogVisible = true;
    },
    //处理审核
    async handleApplication() {
      let remark = this.remark;
      if (remark.trim() == "") {
        this.dialogVisible = false;
        this.$message.warning("请输入备注信息");
        return;
      }
      if (this.passOrNot) {
        let params = this.fileWriteApplication;
        params.status = 0;
        params.result = 0;
        params.remark = remark;
        this.remark = ""; //按下确定按钮后将remark重置，防止下一条审核使用同样的备注
        this.dialogVisible = false;
        //发送通过请求
        let res = await handleFileWritePermissionApply(params);
        if (res.code == 0) {
          this.$message.success("处理成功");
          this.getFileWritePermissionApllication();
          return;
        }
        this.$message.error(res.msg);
      } else {
        let params = this.fileWriteApplication;
        params.status = 0;
        params.result = 1;
        params.remark = remark;
        this.remark = ""; //按下确定按钮后将remark重置，防止下一条审核使用同样的备注
        this.dialogVisible = false;
        //发送通过请求
        let res = await handleFileWritePermissionApply(params);
        if (res.code == 0) {
          this.$message.success("处理成功");
          this.getFileWritePermissionApllication();
          return;
        }
        this.$message.error(res.msg);
      }
    },
    //取消审核
    escApplication() {
      this.remark = "";
      this.dialogVisible = false;
    },
    async handleOnLine(index, row) {},
    async handleDownload(index, row) {
      let proveUrl = row.proveUrl;
      let downloadUrl = BASE_PROVE_FILE_DOWNLOAD_PATH + `?url=${proveUrl}`;
      window.location.href = downloadUrl;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-content {
    width: 70%;
    border-bottom: 1px solid rgb(217, 212, 212);
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    background: rgb(255, 255, 255);
  }
  .my-content {
    height: 540px;
    padding-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(255, 255, 255);
    width: 70%;
    .my-content-item {
      padding: 15px;
    }
    .pagination-content {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>